@import "reset.css";
@import "mixins.scss";
@import "var.scss";

body {
	background-color: #eef2f6;
}

.config-wrapper {
	@include self-center();

	width: 850px;
	height: 700px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	box-shadow: 0 0 10px snow;
	border-radius: 5px;
	overflow: hidden;

	header {
		user-select: none;
		position: relative;

		ul {
			display: flex;
			position: relative;

			li {
				width: 150px;
				height: 45px;
				margin: 0 5px;
				line-height: 45px;

				font-size: 14px;
				font-weight: bold;
				text-align: center;
				letter-spacing: 2px;
				border-radius: 5px;
				cursor: pointer;
				transition: 0.5s all;

				&.selected {
					color: #fff;
				}

				&:first-child {
					margin-left: 0;
				}
			}

			.bg {
				@include origin-linear-gradient(5px);
				width: 150px;
				height: 45px;
				line-height: 45px;
				letter-spacing: 2px;
				border-radius: 5px;

				position: absolute;
				left: 0;
				z-index: -1;
				background-image: $theme-linear-gradient;

				transition: 0.5s all;
			}

			#show-insert-window-btn {
				width: 20px;
				height: 20px;
				position: absolute;
				top: 60%;
				right: 5px;
				cursor: pointer;
				div {
					position: absolute;
					width: 20px;
					height: 4px;
					border-radius: 5px;
					background-image: $theme-linear-gradient;

					@include origin-linear-gradient(2px);
				}

				div:first-child {
					transform: rotateZ(90deg);
				}
			}
		}
	}

	.line {
		@include origin-linear-gradient(5px);
		position: relative;
		height: 5px;
		margin: 8px 0;
		border-radius: 5px;
		background-image: $theme-linear-gradient;

		&::before {
			top: 80%;
		}
	}

	main {
		flex: 1;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: calc(100% * 2);
		height: 580px;
		margin-top: 15px;
		transition: 0.5s all;

		> div {
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: auto;

			&:first-child {
				&::-webkit-scrollbar {
					width: 5px;
					border-radius: 5px;
				}

				&::-webkit-scrollbar-thumb {
					border-radius: 5px;
					background-image: $theme-linear-gradient;
				}
			}
		}

		#proxy-settings-page {
			table {
				width: 100%;

				th {
					height: 50px;
					text-align: center;
					font-weight: bold;
					text-align: center;
					letter-spacing: 2px;
					margin: 10px 0;
				}

				td {
					padding: 15px 0;

					text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					outline-color: #00d9ff;

					&.protocol {
						width: 150px;
						padding: 0 10px;
					}

					&.operation {
						width: 280px;
						button {
							@include origin-linear-gradient(3px);
							position: relative;
							padding: 10px 20px;
							margin: 0 4px;
							font-size: 12px;
							border-radius: 5px;
							color: #fff;
							font-weight: bold;
							transition: 0.5s transform;

							&:hover {
								transform: translateY(-3px);
							}

							&.enable {
								background-image: $theme-linear-gradient;
							}

							&.delete {
								background: $danger-linear-gradient;
							}
						}
					}
				}
			}
		}

		#others-page {
			user-select: none;
			padding: 10px;

			p {
				box-shadow: 0px 0px 15px #ededed;
				border-radius: 6px;
				padding: 20px 15px;

				&.reload-page-wrap {
					display: flex;
					align-items: center;

					#reload-page {
						cursor: pointer;
						width: 16px;
						height: 16px;
					}

					label {
						cursor: pointer;
						font-size: 15px;
						margin-left: 5px;
					}
				}
			}
		}
	}
}

.protocol {
	user-select: none;
	width: max-content;
	height: 40px;
	position: relative;

	&:hover {
		.protocol-select {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			&::after {
				transform: scaleX(1.4) rotateZ(270deg);
			}
		}

		.options {
			transform: translate(-50%, -50%) scale(1);
		}
	}

	.protocol-select {
		@include self-center();
		z-index: 1;

		width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 5px;

		background-color: #fff;
		box-shadow: 0 0 20px #e4e4e4;
		transition: 0.3s all;
		cursor: pointer;

		&::after {
			content: ">";
			display: inline-block;
			margin-left: 7px;
			transform: scaleX(1.4) rotateZ(90deg);
			transition: 0.5s all;

			font-size: 14px;
			color: #bebebe;
		}
	}

	.options {
		@include self-center();

		width: 100px;
		overflow: hidden;
		margin-top: 60px;
		z-index: 2;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		box-shadow: 0 10px 10px #f0f0f0;
		transform: translate(-50%, -50%) scale(0);
		transform-origin: center top;
		transition: 0.5s all;

		.option {
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-color: #fff;
			cursor: pointer;

			&:hover {
				background-color: #ececec;
			}
		}
	}
}

#popup-wrapper {
	z-index: 999;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);

	.popup-content {
		@include self-center();
		padding: 40px 50px;
		border-radius: 5px;
		background-color: #fff;

		#popup-form {
			table {
				margin: 0 auto;
				tr {
					td {
						height: 50px;

						&.text {
							text-align: right;
						}

						&.buttons {
							text-align: center;

							button {
								@include origin-linear-gradient(3px);
								position: relative;
								padding: 10px 15px;
								margin: 0 2px;
								font-size: 12px;
								border-radius: 5px;
								color: #fff;
								letter-spacing: 2px;
								font-weight: bold;
								transition: 0.5s transform;

								&.enable {
									background-image: $theme-linear-gradient;
								}

								&.cancel {
									background: $danger-linear-gradient;
								}
							}
						}

						input {
							box-shadow: 0 0 10px #e7e7e7;
							height: 35px;
						}
					}
				}
			}

			.protocol {
				width: 100px;
				padding: 0 10px;
			}
		}
	}
}
